<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-28 23:07:12
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-29 14:20:46
 * @FilePath: \guanggu_traffic\src\views\normal\components\LayerReport\ReportPopup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-dialog
		title="报告路况"
		v-model="dialogOverflowVisible"
		width="500"
		draggable
		overflow
		:close-on-click-modal="false"
		@open="handleOpen"
	>
		<div>
			<div class="cart">
				<span>事件类型</span>
				<el-select
					v-model="formData.selectValue"
					placeholder="请选择事件类型"
					size="large"
					style="width: 240px"
				>
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
				<span>*</span>
			</div>
			<div class="cart">
				<span>事件地址</span>
				<el-input
					v-model="formData.locationReport"
					placeholder="请输入路况地址，包含事故路段"
					size="large"
					style="width: 240px"
				/>
				<span>*</span>
			</div>
			<div class="cart">
				<span>建筑标识</span>
				<el-input
					v-model="formData.buildingReport"
					placeholder="请输入事故最近的建筑标识"
					size="large"
					style="width: 240px"
				/>
			</div>
			<div class="cart">
				<span>发生时间</span>
				<el-date-picker
					v-model="formData.timeReport"
					type="datetime"
					:default-value="formData.timeReport"
					size="large"
					style="width: 240px"
				/>
				<span>*</span>
			</div>
			<div class="cart">
				<span>事件描述</span>
				<el-input
					v-model="formData.descriptionReport"
					placeholder="请详细描述事件"
					size="large"
					style="width: 240px"
				/>
			</div>
		</div>
		<div slot="footer">
			<div class="dialog-footer">
				<el-button @click="dialogOverflowVisible = false">取 消</el-button>
				<el-button :plain="true" type="primary" @click="handleSumbit"
					>确 定</el-button
				>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
import { reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import{useUserDataStore} from'@/stores/user'
import {addReportHttp} from"@/request/request"
const userData = useUserDataStore()//获取用户信息
//接收父组件v-model传递过来的dialogVisible
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false,
	},
	position: {
		type: Array,
	},
})
const options = [
	{
		value: '碰撞',
		label: '碰撞',
	},
	{
		value: '刮擦',
		label: '刮擦',
	},
	{
		value: '失火',
		label: '失火',
	},
	{
		value: '翻车',
		label: '翻车',
	},
	{
		value: '其他',
		label: '其他',
	},
]
//
const formData = reactive({
	selectValue: '',
	locationReport: '',
	buildingReport: '',
	timeReport: '',
	descriptionReport: '',
})
//事件声明
const emit = defineEmits(['updata:modelValue'])
const dialogOverflowVisible = computed({
	get: () => {
		return props.dialogVisible
	},
	set: (value) => {
		emit('updata:modelValue', value)
	},
})
const handleOpen = () => {
	formData.timeReport = new Date().toLocaleString()
}
//表单提交事件
const handleSumbit = () => {
	//验证表单内容
	if(formData.selectValue==""||formData.locationReport==""||formData.timeReport==""){
        ElMessage.error('请完善报告内容!');
        return 
    }
    //整理参数 发送请求
    let data = {
        name:userData.username,
        type:formData.selectValue,
        address:formData.locationReport,
        signage:formData.buildingReport,
        time:formData.timeReport,
        describe:formData.descriptionReport,
        position:props.position,
        stsus:0
    }
    addReportHttp(data).then((res)=>{
            console.log(res);
            if(res.code==200||res.success){
                ElMessage.success("添加报告成功!");
                dialogOverflowVisible.value = false;
            }
            //重置表单
            formData.buildingReport="";
            formData.selectValue="";
            formData.descriptionReport="";
            formData.locationReport="";
            formData.timeReport="";
    })
	
}
</script>

<style lang="scss" scoped>
.cart {
	padding: 10px;
	span {
		margin: 0 20px;
		font-weight: 800;
	}
}
.el-input__prefix {
	display: none;
}
.dialog-footer {
	margin: 0 0 0 250px;
}
</style>
